<template>
  <tr>
    <td>
      <input
        type="checkbox"
        :checked="item.checked"
        @change="$store.commit('changcke',index)"
      />
    </td>

    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>
      <button @click="btnclick(-1, index)">-</button>{{ item.num
      }}<button @click="btnclick(1, index)">+</button>
    </td>
    <td>{{ item.price * item.num }}</td>
    <td><button @click="del(index)">删除</button></td>
  </tr>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    item: Object,
    index: Number
  },
  methods: {
    ...mapMutations(['btnDel']),
    del (i) {
      this.btnDel(i)
    },
    btnclick (num, index) {
      const newNum = this.item.num + num
      if (newNum < 1) return
      this.$store.commit('btnchange', {
        num: newNum,
        index
      })
    }
  }
}
</script>

<style></style>
